<template>
    <div class="psa">
        <div class='energy' :class="{phone: layout.isMobile}">
            <VRow class="had" no-gutters>
                <VCol cols="3" style="min-width: 100px;">
                    <span class="c-title-4">{{ $t('message.energy.a') }}</span>
                    <div class="p1" v-if="user.isLogin">{{ energy.totalInvites }}</div>
                    <div class="p2" v-else @click="OpenLogin">???</div>
                </VCol>
                <VCol cols="5" style="min-width: 100px">
                    <span class="c-title-4">{{ $t('message.energy.b') }}</span>
                    <div class="p1" v-if="user.isLogin"> {{ numberWithCommas(energy.totalEnergy) }} <sub
                            :class="{ phone: layout.isMobile }">
                            <JNuber class="subnum" prefix="+" :num="energy.todayEnergy" :fix="0" amin notformat></JNuber>
                        </sub></div>
                    <div class="p2" v-else @click="OpenLogin">???</div>
                </VCol>
                <VCol cols="4" style="min-width: 100px">
                    <span class="c-title-4">{{ $t('message.energy.c') }}</span>
                    <div class="p1" v-if="user.isLogin">{{ energy.totalLuckEnergy }} <sub :class="{ phone: layout.isMobile }">
                            <JNuber class="subnum" prefix="+" :num="energy.todayLuckEnergy" :fix="0" amin notformat>
                            </JNuber>
                        </sub></div>
                    <div class="p2" v-else @click="OpenLogin">???</div>
                </VCol>
            </VRow>
            <div class="box">
                <div class="tle">
                    <span>{{ $t('message.energy.d') }}</span>
                    <span @click="nameList.open">{{ $t('message.energy.e') }}<VIcon>mdi mdi-chevron-right</VIcon></span>
                </div>
                <div class="numb">
                    <JNuber :num="suggest.energy" notbold notformat price></JNuber>
                </div>
                <!-- <span class="ID">ID: {{ suggest.id }}</span> -->
                <span class="ID">ID: {{ tools.fromid(suggest.id) }}</span>
            </div>
        </div>
        <Active v-if="layout.isMobile"></Active>
    </div>
</template>
<script lang='ts' setup>
import { nameList, getData, topList, user, tools } from "../baner/components/script/nameList";
import { onMounted, computed } from "vue";
import { energy } from "./script/energy";
import { checkin } from "./script/checkin";
import { formatEnergy } from "@/comm/energy";
import { callObj } from "@/comm/loginSucCall";
import OpenLogin from "@/comm/openLoding";
import JNuber from "@/components/j-number/index.vue";
import Active from "@/views/reward/energy_checkIn/activity.vue";
import { numberWithCommas } from "@/comm/format";
import { useLayout } from "@/stores/layout";
const layout = useLayout()
const suggest = computed(() => {
    if (topList.value !== undefined && topList.value.length > 0) {
        return {
            energy: formatEnergy(topList.value[0].energy),
            id: topList.value[0].id
        }
    }
    return { energy: 0, id: 'xxx-xxx-xxx' };
});
onMounted(() => {
    energy.getuserEnergyCount();
    getData();

    // let tt =  numberWithCommas(3430277);
    // alert(tt);
});
</script>
<style lang='less' scoped>
.psa{
    display: flex;
    align-items: stretch;
    width: 100%;
}
.energy {
    // max-width: 39%;
    width: 50%;
    padding-top: 35px;
    padding-inline: var(--px);
    background-color: var(--card);
    border-radius: 4px;
    // margin-top: var(--space); 
    flex: 1;
    

    .had {
        margin-bottom: 40px;

        .v-col {
            display: flex;
            flex-direction: column;

            span {
                // font-size: 14px;
                text-wrap: nowrap;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #EAECEF;
                line-height: 20px;
            }

            p,
            .p1 {
                align-self: flex-start;
                font-size: 18px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #FCC235;
                line-height: 45px;
                position: relative;

                sub {
                    margin-left: 8px;
                    position: absolute;
                    top: 30%;
                    font-size: 14px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    color: #EAECEF;
                    line-height: 20px;

                    &.phone {
                        position: relative;
                        top: 0;
                    }
                }
            }

            .p2 {
                font-weight: 300;
                font-size: 18px;
            }
        }
    }

    .subnum {
        color: var(--win) !important;

        :deep(.countup-wrap) {
            span {
                // color: greenyellow !important;
            }
        }
    }


    .box {
        .tle {
            span {
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #EAECEF;
                line-height: 20px;

                &:nth-child(2) {
                    margin-left: 33px;
                    color: var(--main);
                }
            }
        }

        .numb {
            font-size: 24px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            color: #EAECEF;
            line-height: 45px;
            margin-block: 4px;
        }

        .ID {
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #EAECEF;
            line-height: 20px;
        }

        padding-bottom: 50px;
    }
}</style>